<template>
  <div>
    <!-- 循环菜单数组 -->
    <div v-for="menu in menus" :key="menu.path">
      <!-- 如果有子菜单 -->
      <el-submenu
        v-if="menu.children && menu.children.length"
        :index="menu.path"
        popper-append-to-body
      >
        <template slot="title">
          <i style="w">

          <svg t="1626335852810" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1335" width="200" height="200"><path d="M217.76384 210.52928 835.26144 210.52928 835.26144 277.58592 217.76384 277.58592 217.76384 210.52928Z" p-id="1336"></path><path d="M837.42208 303.49312 215.63904 303.49312l-45.93664 116.15232 0 28.43136L171.008 448.0768c5.66784 21.50912 29.52192 37.7088 58.17344 37.7088 28.63104 0 52.54144-16.2304 58.16832-37.7088l2.58048 0c5.66784 21.50912 29.5424 37.7088 58.16832 37.7088 28.64128 0 52.54144-16.2304 58.18368-37.7088l2.59584 0c5.66784 21.50912 29.52704 37.7088 58.1888 37.7088 28.63104 0 52.52608-16.2304 58.14784-37.7088l2.60096 0c5.66784 21.50912 29.53728 37.7088 58.16832 37.7088 28.63104 0 52.54144-16.2304 58.16832-37.7088l2.60096 0c5.65248 21.50912 29.54752 37.7088 58.17856 37.7088 28.65152 0 52.52096-16.2304 58.17856-37.7088l2.59072 0c5.64224 21.50912 29.54752 37.7088 58.16832 37.7088 28.63104 0 52.54144-16.2304 58.20928-37.7088l1.30048 0 0-28.43136L837.42208 303.49312 837.42208 303.49312z" p-id="1337"></path><path d="M838.88128 774.41536 838.88128 508.416 769.1776 508.416 769.1776 679.69536 458.78784 679.69536 458.78784 508.416 423.56224 508.416 423.56224 774.41536 288.62976 774.41536 288.62976 508.416 217.76384 508.416 217.76384 774.41536 169.7024 774.41536 169.7024 808.2944 883.33824 808.2944 883.33824 774.41536 838.88128 774.41536Z" p-id="1338"></path></svg>
          </i>

          <span>{{ menu.title }}</span>
        </template>
        <navbar-item :menus="menu.children"></navbar-item>
      </el-submenu>
      <!-- 如果没有子菜单 -->
      <el-menu-item v-else :index="menu.path">
        <i class="el-icon-menu"></i>
        <span slot="title">{{ menu.title }}</span>
      </el-menu-item>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavbarItem",
  data(){
    return {
      menuTitleDisplay:{
        menu_title:this.collapse
      }
    }
  },
  props: {
    menus: {
      type: Array,
      require: true,
    },
    collapse:{
      type:Boolean,
      default:false
    }
  },
};
</script>

<style scoped>
svg{
  /* font-size: 2rem; */
  width: 2rem;
  height: 2rem;
}
</style>